var app = new Vue({
    el: "#app",
    data: {
        name: '',
        type: '0',
        typeName: '无',
        desc: '无',
        picName: '',
        base64Pic: '',//base64编码的图片
        addButton: false,/*布尔值，通过v-show控制显示‘添加到人脸名单’还是不显示 */

    },
    methods: {

        //测试上传请求
        submitPic: function (e) {

            this.addButton = false;//使提交按钮隐藏
            //加载过渡动画
            //loading带文字
            var loading = layer.open({
                type: 2,
                shadeClose: false,
                content: '正在加载'
            });
            axios({
                method: 'post',
                url: '/userDo/uploadBase64Pic.do',
                responseType: 'json',//这个是默认的
                data: {
                    name: this.name,
                    type: this.type,
                    desc: this.desc,
                    picName: this.picName,
                    base64Pic: this.base64Pic
                },
            }).then(function (response) {
                var r = response.data;

                if (r.code == 200) {

                    layer.close(loading);

                    /*
                    layer.open({
                        content: '人脸注册成功,系统会在10分钟内授权给所有门禁设备，请耐心等待',
                        time: 3
                    });
                    */
                    //自动刷新页面
                    app.$options.methods.switchFaceList(e);

                } else {
                    app.addButton=true;//使提交按钮显示
                    var resultMsg = '';
                    switch (r.code) {

                        case -1:
                            resultMsg = '添加图片失败，请稍后再试！code:' + r.code;
                            break;
                        case -2:
                            resultMsg = '人脸识别设备繁忙，请稍后再试！code:' + r.code;
                            break;
                        case -6:
                        case -7:
                        case -8:
                        case -9:
                        case -10:
                            resultMsg = '未识别到人脸，请按规定重新上传人脸图片！code:' + r.code;
                            break;
                        case -200:
                            resultMsg = '添加失败，人脸数量已达上限，若要继续添加，请删除部分图片后再试！code:' + r.code;
                            break;
                        case -201:
                            resultMsg = '添加失败，您所在的小区还没有安装人脸识别设备，请咨询物业管理人员！code:' + r.code;
                            break;
                        case -203:
                            resultMsg = '添加失败，你所在的小区人脸识别设备状态异常，请联系物业管理人员！code:' + r.code;
                            break;
                        case -205:
                            resultMsg = '添加失败，人脸识别设备不在线，无法完成同步！code:' + r.code;
                            break;
                        case -206:
                            resultMsg = r.msg;
                            break
                        default : resultMsg=r.msg+':'+r.code;
                    }
                    //关闭过渡页面
                    layer.close(loading);
                    //alert(resultMsg);
                    //生成新的弹框
                    layer.open({
                        content: resultMsg,
                        shadeClose: false,
                        time: 3,
                        btn: ['我知道了']
                    });

                }
                console.log(response.status);
            }).catch(function (error) {
                //关闭过渡页面
                layer.close(loading);
                //alert(resultMsg);
                //生成新的弹框
                layer.open({
                    content: '网络异常，请检查网络！',
                    time: 3
                });
                console.log(error);
            });
        },//第一个方法结束
        //跳转到列表页面
        switchFaceList: function (e) {
            //跳转到新的页面
            //axios('/user/addface.html');
            window.location.href = "/user/modifyface.html";
        },
        chooseSelect: function (e) {
            //console.log("自动绑定的:"+this.type);
            var selectType = this.type;
            switch (selectType) {

                case "0":
                    app.typeName = '业主';
                    break;
                case "1":
                    app.typeName = '家属';
                    break;
                case "2":
                    app.typeName = '访客';
                    break;
                default:
                    app.typeName = '请选择';
            }
        },

        // 上传图片方法开始
        uploadImg: function (e) {
           // alert("到达图片上传方法");
            base64Image({
                width: 512,                             /*【选填】宽度默认750，如果图片尺寸大于该宽度，图片将被设置为该宽度*/
                ratio: 0.75,                            /*【选填】压缩率默认0.75 */
                file: e.target,                               /*【必填】对应的上传元素 */
                callback: function (imageUrl){         /*【必填】处理成功后的回调函数 */
                    /*imageUrl为得到的图片base64数据，这里可以进行上传到服务器或者其他逻辑操作 */
                   // alert("收到回调数据");
                    var img = document.getElementById('preview');
                    //将图片回显到界面上
                    img.src = imageUrl;
                    //对需要提交的变量赋值
                    app.base64Pic = imageUrl;
                    //使提交按钮显示
                    if(!app.base64Pic){
                        app.addButton = false;
                    }else {
                        app.addButton = true;
                    }
                }
            });

        },//上传图片方法结束
        //图片上传方法，该方法未使用
        ajaxUploadPic: function (newFile) {


            var url = window.location.protocol + '//' + window.location.host + "/userDo/imgUpload.do";
            $.ajax({
                url: url,
                type: "post",
                data: newFile,
                //dataType:"json",
                contentType: false,
                processData: false,
                success: function (data) {
                    /*$('#message').html(data.message);*/
                    if ('1' == data.resultCode) {
                        //ajax请求完成后指向的域不再是vue中
                        app.picName = data.fileName;
                        alert("图片上传成功");
                    }
                    else {
                        alert("图片上传失败");
                        //$('#div1').html("上传失败");
                    }

                },
                error: function () {
                    alert("网络错误");
                    console.log("请求上传失败");
                }
            });


        },  //ajax上传图片结束
        //旋转图片
        rotateImg: function (img, direction, canvas) {

            //alert(img);
            //最小与最大旋转方向，图片旋转4次后回到原方向
            var min_step = 0;
            var max_step = 3;
            //var img = document.getElementById(pid);
            if (img == null) return;
            //img的高度和宽度不能在img元素隐藏后获取，否则会出错
            var height = img.height;
            var width = img.width;
            //var step = img.getAttribute('step');
            var step = 2;
            if (step == null) {
                step = min_step;
            }
            if (direction == 'right') {
                step++;
                //旋转到原位置，即超过最大值
                step > max_step && (step = min_step);
            } else {
                step--;
                step < min_step && (step = max_step);
            }
            //img.setAttribute('step', step);
            /*var canvas = document.getElementById('pic_' + pid);
            if (canvas == null) {
                img.style.display = 'none';
                canvas = document.createElement('canvas');
                canvas.setAttribute('id', 'pic_' + pid);
                img.parentNode.appendChild(canvas);
            }  */
            //旋转角度以弧度值为参数
            var degree = step * 90 * Math.PI / 180;
            var ctx = canvas.getContext('2d');
            switch (step) {
                case 0:
                    canvas.width = width;
                    canvas.height = height;
                    ctx.drawImage(img, 0, 0);
                    break;
                case 1:
                    canvas.width = height;
                    canvas.height = width;
                    ctx.rotate(degree);
                    ctx.drawImage(img, 0, -height);
                    break;
                case 2:
                    canvas.width = width;
                    canvas.height = height;
                    ctx.rotate(degree);
                    ctx.drawImage(img, -width, -height);
                    break;
                case 3:
                    canvas.width = height;
                    canvas.height = width;
                    ctx.rotate(degree);
                    ctx.drawImage(img, -width, 0);
                    break;
            }

        }//旋转图片结束

    }//methods结束


});